<template>
  <div class="header-bar">
    <div class="left">
      <img src="~@/assets/musicImg/logo.png" alt=""/>
    </div>
    <div class="center">
      <div class="buttons">
        <i
          class="el-icon-arrow-left back"
          @click="$router.go(-1)"
        ></i>
        <i
          class="el-icon-arrow-right forward"
          @click="$router.go(1)"
        ></i>
      </div>
      <div class="search">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          size="mini"
          slot="reference"
          @keyup.enter.native="OnSubMit"
          v-model="searchInput"
        >
        </el-input>
      </div>
    </div>
    <div class="right">
      <div class="user">
        <div class="avatar" @click="ShowLoginFrame">
          <img v-if="!userInfo.avatarUrl"
            src="~@/assets/musicImg/test.jpg"
            alt=""
            slot="reference"
          />
          <img v-else
            :src="userInfo.avatarUrl"
            alt=""
            slot="reference"
          />
        </div>
        <div class="userName" v-if="this.$store.state.MusicStore.isLogin">{{userInfo.nickname}}</div>
        <div class="userName" v-else>未登录</div>
        <div class="userName logout" v-if="this.$store.state.MusicStore.isLogin">
           <i class="iconfont icon-tuichu1" @click="logout">退出</i>
           </div>
      </div>
    </div>
 <music-login v-if="isShowLoginFrame" @isShowLoginFrame="GetFromChild" @GetLoginUserInfo="GetLoginUserInfo"></music-login>
  </div>
</template>

<script>
import musicLogin from "../../views/music/musicLogin/musicLogin";
export default {
  name: "HeaderBar",
  components:{
    musicLogin,
  },
  data() {
    return {
      //头像
      userInfo: {},
        //  是否显示登录界面
      isShowLoginFrame:false,
      isPopoverShow: false,
      // 是否显示searchPop
      isSearchPopShow: false,
      // 热搜列表数据
      hotSearchList: [],
      // 需要搜索的内容
      searchInput: "",
      // 搜索建议列表
      searchSuggestList: {},
      // 是否显示注册框
      isRegisteredShow: false,
    }
  },
  methods:{
    //接收子组件传回登录信息
    GetLoginUserInfo(msg){
      this.userInfo = msg;
      //获取昵称
      //获取头像

      console.log('接收到',msg)
    },
    //获取按键事件
    OnSubMit(e){
      if(e.keyCode===13&&this.searchInput!==''){
        this.GetSearchKey()
        console.log(this.searchInput)
      }
      else {
        this.$message({
          message: '请输入搜索内容',
          type: 'warning',
          duration:1500
        });
      }


    },
     //搜索回车回调
     GetSearchKey(){
      // let res = await this.$request("/cloudsearch",{
      //   keywords:this.searchInput,
      //
      // })

      // console.log(res)
      //  console.log(this.$route)
       // 跳转搜索详情页
        this.$router.push({name:'search',params:{id:this.searchInput}})
    },
  //  点击登录头像回调
    ShowLoginFrame(){
      // this.$store.
      //console.log('点击登录')
      if(this.$store.state.MusicStore.isLogin){
        this.showPersonInfo()
      }else {
        this.isShowLoginFrame = true;
      this.$store.commit("MusicStore/updateShowLoginFrame",true)
      }

    },
    showPersonInfo(){ //已经登录时，直接显示个人信息
          // 跳转至个人页面
      if (this.$route.path !== `music/personal-index/${this.userInfo.userId}`)
        this.$router.push({
          name: "music/personal-index",
          params: { uid: this.userInfo.userId },
        });
      // console.log(this.$route);
      // layer.msg('已登录',{
      //   icon:1,
      //   time:1500,
      // })
    },
  //  接收子组件的传值
    GetFromChild(status){
      this.isShowLoginFrame=status;//修改登录框的状态
      this.$store.commit("MusicStore/updateShowLoginFrame",status)
    },
  //  获取登录信息
    GetLoginInfo(){
      let LoginUserInfo = this.$store.state.MusicStore.LoginUserInfo;
      this.userInfo = LoginUserInfo.profile;
    },
  //  退出登录
   async logout(){
      let res = await  this.$request('/logout')
      if(res.data.code===200){
            //  更新VUEX登录状态
      this.$store.commit('MusicStore/updataLoginState',false)
    //  清空VUEX登录信息
      this.$store.commit('MusicStore/updateLoginUserInfo',{})
    //  删除本地缓存
      window.localStorage.removeItem('USERID');
      window.localStorage.removeItem('USERCOOKIE')
      this.$store.commit('MusicStore/updateCreatedMusicList',{})//删除个人歌单
      layer.msg('退出成功',{
        icon:1,
        time:1500,
      })
      }else {
        layer.msg('退出失败',{
        icon:1,
        time:1500,
      })
      }
      await this.$router.push('/discover/recommend')//退出后，返回首页推荐

    }
  },
  watch:{
    "$store.state.MusicStore.isLogin"(isLogin){
     if(!isLogin){
       this.userInfo={};
     }
    }
  },
  created() {
    if (this.$store.state.MusicStore.isLogin){
       this.GetLoginInfo()
    }

  }
}
</script>

<style scoped lang="less">
@import "./HeaderBar-element.css";

.header-bar {
  display: flex;
  align-items: center;
  position: relative;
  height: 100% !important;
  z-index: 1000;

  .left {
    width: 110px;
    margin: 0 50px 0 10px;
    display: flex;
    align-items: center;

    .left img {
      width: 100%;
    }
  }

  .center {
    width: 380px;
    height: 100% !important;
    display: flex;
    align-items: center;
  }

  .buttons {
    color: rgb(235, 235, 235);
    display: flex;
    height: 22px;
    align-items: center;
  }

  /*
  修改el-input__inner，必须用/deep/，否则不会生效
   */

  .search {
    width: 100%;
  }

  /deep/ .el-input__inner {
    background-color: #e13e3e !important;
    border: none;
    color: white !important;
    border-radius: 15px;
  }

  .buttons i {
    background-color: #e13e3e;
    font-size: 22px;
    transform: scale(0.8);
    padding: 5px;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    margin: 0 15px;
    cursor: pointer;
  }

  .right {
    display: flex;
    position: absolute;
    right: 50px;
    top: 0;
    line-height: 50px;
  }

  .user {
    height: 100% !important;
    display: flex;
    align-items: center;
  }

  .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
  }

  .avatar img {
    width: 100%;
  }

  .userName {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    width: 100px;
    text-align: left;
  }
  .logout :hover{
    cursor: pointer;
  }

  .loginButton {
    width: 100%;
    text-align: center;
  }

  .loginButton .el-button {
    width: 200px;
  }

  .el-form /deep/ .el-form-item__label {
    font-size: 13px !important;
  }

  .hotSearchTitle {
    font-size: 13px;
    margin: 10px 0 5px 20px;
  }

  .hotSearchItem {
    display: flex;
    align-items: center;
    padding: 6.5px 15px;
    cursor: pointer;
  }

  .hotSearchItem:hover {
    background-color: #f2f2f2;
  }

  .hotSearchIndex {
    margin-right: 15px;
    color: #aaa;
  }

  .topThree {
    color: #e13e3e;
  }

  .hotSearchWord {
    font-size: 12px;
    color: rgb(51, 51, 51);
  }

  .hotSearchWordTopThree {
    font-weight: 600;
    color: black;
  }

  .hotSearchContent {
    font-size: 12px;
    transform: scale(0.9) translateX(-5%);
  }

  .searchSuggest {
    font-size: 12px;
  }

  .searchSuggestItemTitle {
    background-color: #f5f5f7;
    padding: 4px 8px;
  }

  .searchSuggestItemTitle i {
    font-size: 15px;
  }

  .searchSuggestItem {
    cursor: pointer;
  }

  .suggestItemDetail {
    padding: 4px 27px;
    font-size: 12px;
  }

  .suggestItemDetail:hover {
    background-color: #f2f2f2;
  }

}

</style>
